文章將陸續整理並更新至個人部落格。

inline-block 就像是 HTML 中 inline 和 block 兩大角頭聯姻下的產物，來看看他遺傳了哪些優良的顯性基因吧！

首先，該如何召喚出 inline-block 呢？
很簡單，利用 display 屬性。
順便稍微認識一下 display 吧！

display

以下摘自 W3C：

The display property defines an element’s display type, which consists of the two basic qualities of how an element generates boxes:

• the inner display type, which defines (if it is a non-replaced element) the kind of formatting context it generates, dictating how its descendant boxes are laid out. (The inner display of a replaced element is outside the scope of CSS.)

• the outer display type, which dictates how the principal box itself participates in flow layout.

簡單來說

display 屬性用來決定元素的顯示方式，其中又分為：

• 內部顯示：定義元素(替換元素除外）會形成何種格式化上下文，會影響後裔元素的佈局。

• 外部顯示：定義元素本身如何參與佈局(layout)。

團圓時間～快速回顧一下 inline 和 block

inline

• display 屬性值為 inline。
  摘自 W3C

  This value causes an element to generate one or more inline boxes.

• 除了替換元素之外，無法透過 width 與 height 屬性調整寬高。

• 除了替換元素之外，寬高取決於內容(例如文字)的長度與行高(line height)。

• 呈現水平排列。

• 裡面只能放 inline 元素。
  
  下圖為三個 <span>

block

• display 屬性值為 block。

  摘自 W3C

  This value causes an element to generate a principal block box.

• 預設寬度為容器的 100%。

• 可以透過 width 與 height 屬性調整寬高。

• 強迫換行，呈現垂直排列。

• 裡面可放 inline 元素或 block 元素。
  
  下圖為三個 <div>:

inline-block

• display 屬性值為 inline-block。

  摘自 W3C

  This value causes an element to generate a principal inline-level block container. (The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.)

  簡單來說，若將元素 A 的 display 值設定為 inline-block：

  內部顯示：A 元素形成一個 塊格式化上下文(BFC)，對後裔元素來說是個 block 容器。

  外部顯示：A 元素成為 行內級元素(inline-level element)，參與行內格式化上下文(IFC)，呈現水平排列。

可以想像成：

註：W3C 對於行內級元素(inline-level) 的定義 為 display: inline、inline-table、inline-block 的元素，皆屬於行內級元素。

• 可以透過 width 與 height 屬性調整寬高。

• 呈現水平排列。

• 在無設定 width 與 height 時，寬高由內容決定。

• 裡面可放 inline 元素或 block 元素。

下圖為三個 inline-block:

咦？ 在 display: inline-block 下，明明沒有指定 margin，元素與元素之間卻有空白的縫隙 ?!

這是因為 HTML 標籤之間因空格或換行而造成的一個空白字元空間。

解決方法

既然是因為預設的空白字元空間所造成的，那就用字的屬性來解決它吧！
在元素的外容器指定 font-size: 0，會發現元素內的文字消失了(因為繼承)，再重新指定一個 font-size 值給元素就長回來囉。

雖然 display 屬性很好用，可以將 inline 和 block 互換，但不建議這樣使用唷～

參考資料

W3C-display
W3C-Inline-level elements and inline boxes
MDN-display
MDN-Block formatting context